<template>
	<view class="my">
		<view class="topBack" v-if="userInfo.id">

			<image class="topBackImg" :src="userInfo.head?userInfo.head:'../../static/tabbar/pet.png'"
				@tap="goUserEditing"></image>
			<view class="topBackRight">
				<text class="topBackRightTitle">{{userInfo.nickname}}</text>
				<text class="telDiv">手机号:{{phoneFun(userInfo.phone)}}</text>
				<text class="idDiv">ID:{{userInfo.id}}</text>
			</view>
		</view>
		<view v-else class="topBack" @tap="goLogin">
			<text class="loginText">请先登录</text>
		</view>
		<view class="myBottom">
			<view class="myBottomItem" @tap="goMyOrder">
				<div class="leftView">
					<image class="myBottomItemLeft" v-if="false"></image>
					<text class="myBottomItemLeftText">我的订单</text>
				</div>

				<image class="rightIcon"
					src="https://chongwu.aitaoba.net/storage/uploads/20231118/8a1ef58ba09c08e2c382762f0f5a8d14.png">
				</image>
			</view>
			<view class="myBottomItem" @tap="goShoppingCart">
				<div class="leftView">
					<image class="myBottomItemLeft" v-if="false"></image>
					<text class="myBottomItemLeftText">购物车</text>
				</div>

				<image class="rightIcon"
					src="https://chongwu.aitaoba.net/storage/uploads/20231118/8a1ef58ba09c08e2c382762f0f5a8d14.png">
				</image>
			</view>
			<view class="myBottomItem" @tap="myCollection">
				<div class="leftView">
					<image class="myBottomItemLeft" v-if="false"></image>
					<text class="myBottomItemLeftText">我的收藏</text>
				</div>

				<image class="rightIcon"
					src="https://chongwu.aitaoba.net/storage/uploads/20231118/8a1ef58ba09c08e2c382762f0f5a8d14.png">
				</image>
			</view>
			<view class="myBottomItem" @tap="goAddress">
				<div class="leftView">
					<image class="myBottomItemLeft" v-if="false"></image>
					<text class="myBottomItemLeftText">收货地址</text>
				</div>

				<image class="rightIcon"
					src="https://chongwu.aitaoba.net/storage/uploads/20231118/8a1ef58ba09c08e2c382762f0f5a8d14.png">
				</image>
			</view>
			<view class="myBottomItem" @click="goContactService">
				<div class="leftView">
					<image class="myBottomItemLeft" v-if="false"></image>
					<text class="myBottomItemLeftText">联系客服</text>
				</div>

				<image class="rightIcon"
					src="https://chongwu.aitaoba.net/storage/uploads/20231118/8a1ef58ba09c08e2c382762f0f5a8d14.png">
				</image>
			</view>
			<image class="topRightImg"
				src="https://chongwu.aitaoba.net/storage/uploads/20231118/6861f20a14bea11188ae2f9e72269368.png"></image>
			<image class="bottomImg"
				src="https://chongwu.aitaoba.net/storage/uploads/20231125/1686f6b1783081561b582d802ca75860.png"></image>
		</view>

	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/api/my.js'
	import {
		getIndex,
		createOrder
	} from '@/api/index.js'
	export default {
		data() {
			return {
				userInfo: {},
				indexdata: ''
			}
		},
		/**
		 * 跳转到个人中心
		 */
		onBackPress(e) {

		},
		onPullDownRefresh() {

		},
		onShow() {
			this.getUserInfo();
			try {
				uni.$on('setUserInfo', (user) => {
					console.log('监听到事件来自返回的参数', user);
					// TODO 下面执行刷新的方法
					this.$set(this.userInfo, 'nickname', user.nickname)
					this.$set(this.userInfo, 'phone', user.phone)
					this.$set(this.userInfo, 'head', user.head)

				})
			} catch (err) {
				console.log('没影响')
			}

			this.getIndexData();
		},

		onLoad(options) {

		},

		watch: {

		},
		methods: {
			getIndexData() {
				let that = this;
				getIndex({}).then((resw) => {
					console.log(resw, '获取首页数据')
					if (resw.code == 200) {
						that.indexdata = resw.data;


					}
				}).catch()
			},
			// 去联系客服
			goContactService() {

				uni.navigateTo({
					url: "/pages/contactService/contactService?service_img=" + this.indexdata.service_img
				})
			},
			goUserEditing() {
				// userEditing
				uni.navigateTo({
					url: "/pages/userEditing/userEditing?userData=" + encodeURIComponent(JSON.stringify(this
						.userInfo))
				})
			},
			phoneFun(str) {
				if (str) {
					return str.substring(0, 3) + '_' + str.substring(3, 7) + '_' + str.substring(7, 11)
				} else {
					return '';
				}

			},
			getUserInfo() {
				getUserInfo({}).then((res) => {
					console.log(res, '用户信息')
					this.userInfo = res.data;
				}).catch((res) => {
					console.log(res, 'catch')
				})
			},
			goMyOrder() {
				uni.navigateTo({
					url: "/pages/myOrder/myOrder"
				})
			},
			goShoppingCart() {
				uni.navigateTo({
					url: "/pages/shoppingCart/shoppingCart"
				})
			},
			myCollection() {
				uni.navigateTo({
					url: "/pages/myCollection/myCollection"
				})
			},
			goAddress() {
				uni.navigateTo({
					url: "/pages/harvestAddressList/harvestAddressList"
				})
			},
			goLogin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.my {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.topBack {
		width: 750rpx;
		height: 600rpx;
		background: linear-gradient(180deg, #FAE24E 0%, rgba(250, 226, 78, 0) 100%);
		border-radius: 0rpx;
		display: flex;
		// align-items: center;
		padding: 58rpx 0 0 32rpx;
		box-sizing: border-box;
	}

	.loginText {}

	.topBackImg {
		width: 136rpx;
		height: 136rpx;
		border-radius: 50%;
	}

	.topBackRight {
		display: flex;
		flex-direction: column;
		margin-left: 22rpx;
	}

	.topBackRightTitle {
		font-size: 40rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #683518;
	}

	.telDiv {
		font-size: 26rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
		margin-top: 8rpx;
	}

	.idDiv {
		font-size: 26rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
	}

	.myBottom {
		width: 750rpx;
		height: 78vh;
		background: linear-gradient(180deg, #FFF5B9 0%, #FFFFFF 35%, #FFFFFF 100%);
		border-radius: 50rpx 50rpx 0rpx 0rpx;

		border: 4rpx solid #FFFFFF;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 2;
		display: flex;
		flex-direction: column;
		padding: 107rpx 87rpx 0 50rpx;
		box-sizing: border-box;
	}

	.topRightImg {
		width: 295rpx;
		height: 263rpx;
		position: absolute;
		right: 0;
		top: -230rpx;
		z-index: 3;
	}

	.bottomImg {
		width: 750rpx;
		height: calc(78vh - 623rpx);
		position: absolute;
		let: 0rpx;
		bottom: 0rpx;
		z-index: 3;
		transform: translate(-52rpx, 0);
	}

	.myBottomItem {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 65rpx;
	}

	.leftView {
		display: flex;
		align-items: center;
	}

	.myBottomItemLeft {
		width: 35rpx;
		height: 35rpx;
	}

	.myBottomItemLeftText {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
	}

	.rightIcon {
		width: 15rpx;
		height: 28rpx;
	}
</style>